<template>
  <div class="Page-recommend">
    <el-carousel
      v-loading="load"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      :interval="5000"
      type="card"
      height="190px"
    >
      <el-carousel-item v-for="(item, index) in bannersData" :key="index">
        <img v-lazy="item.imageUrl" />
      </el-carousel-item>
    </el-carousel>
    <E-reco-playlist />
    <E-reco-exclusive />
    <E-reco-new-music />
    <E-reco-mv />
    <E-reco-radio />
  </div>
</template>

<script>
export default {
  components: {
    'E-reco-playlist': () => import('./module/E-reco-playlist'),
    'E-reco-exclusive': () => import('./module/E-reco-exclusive'),
    'E-reco-mv': () => import('./module/E-reco-mv'),
    'E-reco-new-music': () => import('./module/E-reco-new-music'),
    'E-reco-radio': () => import('./module/E-reco-radio')
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      load: true,
      bannersData: []
    };
  },
  methods: {
    getData() {
      this.$api.get('home_banner').then(({ banners = [] }) => {
        this.bannersData = banners;
      }).finally(() => { this.load = false; });
    }
  }
};
</script>

<style lang="scss" scoped>
.Page-recommend {
  padding: 20px;
  .el-carousel {
    .el-carousel__item {
      &:nth-child(2n) {
        background-color: #99a9bf;
      }

      &:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
      img {
        width: 100%;
        height: 100%;
        // object-fit: cover;
      }
    }
    .el-carousel__item--card {
      border-radius: 10px;
      overflow: hidden;
    }
  }
}
</style>
